<template>
	<view>
		<cu-custom bgColor="bg-white" :isBack="true" >
			<block slot="content">领券中心</block>
		</cu-custom>
		<view class="padding">
			<view class="item padding bg-white radius-xl margin-bottom coupon" v-for="(item,index) in list" :key="index">
				<view class="money-text text-center solid-right padding-right">
					<view class="money text-red">
						<text class="text-sm">￥</text>
						<text class="number text-bold">{{item.reduce_price}}</text>
					</view>
					<view class="text-red text-sm">
						最高可减
					</view>
				</view>
				<view class="right crow">
					<view class="nameBox margin-left">
						<view class="name text-black text-bold padding-bottom-xs">
							{{item.name}} <!-- <text class="text-sm text-gray padding-left-xs">满39.00可用</text> -->
						</view>
						<view class="min text-gray">
							<text v-if="item.expire_type == 10">
								领取后{{item.expire_day}}内有效
							</text>
							<text v-if="item.expire_type == 20">
								有效期至{{item.end_time}}
							</text>
						</view>
					</view>
					<view class="linqu">
						<template v-if="!item.is_receive">
							<button class="cu-btn china-btn-bg sm round shadow bg-white" @click="receive(item.coupon_id,index)">立即领取</button>
						</template>
						<template v-else>
							<button class="cu-btn bg-green sm round shadow">去使用</button>
						</template>
					</view>
				</view>
				
			</view>			
		</view>
		
		<Loading v-if="pageLoading"/>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageLoading:false,
				current_page:1,
				list:[
					{
						name:'无门槛领取',
						reduce_price:'5.50',
						expire_day:30,
						expire_type:10,
						coupon_id:1,
						is_receive:false
					},
					{
						name:'满减券',
						reduce_price:'10.50',
						end_time:'2023-07-20',
						expire_type:20,
						coupon_id:1,
						is_receive:true
					},
					{
						name:'无门槛领取',
						reduce_price:'5.50',
						expire_day:30,
						expire_type:10,
						coupon_id:1,
						is_receive:false
					},
					{
						name:'无门槛领取',
						reduce_price:'5.50',
						expire_day:30,
						expire_type:20,
						coupon_id:1,
						is_receive:true
					}
				]
			};
		},
		watch:{
			pageLoading(e){
				if(e){
					let self = this;
					setTimeout(function(){
						self.pageLoading = false;
					},1000)
				}
			}
		},
		onLoad(options) {
			this.pageLoading = true;
		},
		methods:{
			
		}
	}
</script>

<style lang="less" scoped>
.item{
	display: flex;
	align-items: center;
	position: relative;
	.money-text{
		width: 170upx;
		.money{
			.number{
				font-size: 40upx;
			}
		}
	}
	.right{
		flex: 1;
		justify-content: space-between;
		.nameBox{
			.name{
				font-size: 30upx;
			}
			.min{
				font-size: 24upx;
			}
		}
	}
}
.coupon::before,.coupon::after{
	content: "";
	position: absolute;
	background-color: #f5f5f7;	
	width: 20upx;
	height: 20upx;
}
.coupon::before {
	top: 0;
	right: 25%;
	border-radius: 0 0 50% 50%;
}

.coupon::after {
	bottom: 0;
	right: 25%;
    border-radius: 50% 50% 0 0; /* 底部两个半圆 */
}
</style>
